<template>
  <div id="taglistBox" >
      <ul>
        <li v-for="(item,index) in selectTag" :key="item.id" @click="choose(index,item)" v-bind:class="{active:index == current}"><a href="#">{{item}}</a></li>
      </ul>
  </div>
</template>
<script>
export default {
  data(){
    return {
      isActive:false,
      current:-1
    }
  },
  props:['selectTag'],
  created:function(){
  },
  methods:{
    choose:function(index,item){
      this.current = index;
      this.$emit('tag',item);
    },
  }
}
</script>
<style scoped>
  #taglistBox{
    width: 40%;
    max-height: 200px;
    overflow-y:scroll;
    position: absolute;
    top: 95px;
    background-color:#FFF;
    z-index: 1;
  }
  li{
    text-align: center;
    height: 20px;
    border: 1px solid #aaa;
    line-height: 20px;
    font-size: 10px;
    cursor: pointer;
  }
  li:hover{
    background-color: #aaa;
  }
  a{
    text-decoration: none;
    color:darkolivegreen
  }
  li:hover a{
    color:#000
  }
  .active{
    background-color: #aaa;
  }
  .active a{
    color:#000
  }
</style>